<template>
  <div class="flex-layout" :style="mergeStyle">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'FlexLayout',
  props:{
    direction:{
      type:String,
      default:'row',//row | row-reverse | column | column-reverse;
    },
    wrap:{
      type:String,
      default:'nowrap',//nowrap | wrap | wrap-reverse;
    },
    justifyContent:{
      type:String,
      default:'center',//flex-start | flex-end | center | space-between | space-around;
    },
    alignContent:{
      type:String,
      default:'center',//flex-start | flex-end | center | space-between | space-around;
    },
    alignItems:{
      type:String,
      default:'center',//flex-start | flex-end | center | space-between | space-around | stretch;
    }
  },
  data(){
    return {
      mergeStyle:{
        flexDirection:this.direction,
        flexWrap:this.wrap,
        justifyContent:this.justifyContent,
        alignItems:this.alignItems,
        alignContent:this.alignContent,
      }
    }
  }
}
</script>
<style scoped>
.flex-layout{
  display: flex;

}
</style>